<template>
	<view class="container">
		<view class="example">
			<!-- 基础表单校验 -->
			<uni-forms ref="valiForm" :rules="rules" label-position="top" :modelValue="valiFormData" label-width="100%">
				<uni-forms-item label="评价" required name="evaluate">
					<uni-data-checkbox v-model="valiFormData.evaluate" :localdata="evaluates"/>
				</uni-forms-item>
				<uni-forms-item label="您认为本公司的服务需要改进的地方"  name="suggestion" >
					<uni-easyinput type="textarea" v-model="valiFormData.suggestion" placeholder="您认为本公司的服务需要改进的地方"/>
				</uni-forms-item>
			</uni-forms>
			<button type="primary" @click="submit('valiForm')" :disabled="submitDisabled">提交</button>
		</view>
	</view>
</template>

<script>
	import config from '@/config'
	export default {
		data() {
			return {
				title: '登录适配',
				valiFormData: {
					
					evaluate: 1,
					suggestion: '',
				},
				submitDisabled: false,
				fileList: [],
				faultSelect: [],
				evaluateIs:'',
				evaluates: [{
					text: '不满意',
					value: 0
				}, {
					text: '满意',
					value: 1
				}],
				// 校验规则
				rules: {
					evaluate: {
						rules: [{
							required: true,
							errorMessage: '评价不能为空'
						}]
					},
					
					
				},
				id: '',
				configUrl: '',
			}
		},
		created() {
			this.configUrl = config.baseUrl
		},
		onLoad(options) {
			console.log('接收到的参数', options);

			this.id = options.id; // 获取第一个参数值

		},
		methods: {
			submit(ref) {
				this.$refs[ref].validate().then(res => {
					console.log('success', res);

					this.request({
						'url': '/wx/syn/feedback/evaluate',
						'method': 'post',
						'data': {
							id:this.id,
							productId: this.$store.getters.productId,
							evaluate: res.evaluate,
							suggestion: res.suggestion,
						}
					}).then(res => {
						console.log(res)
						if (res && res.code == 200) {
							// this.list = res.info
							// this.valiFormData.productModel = res.info.model
							uni.showToast({
								title: '添加成功'
							})
							setTimeout(() => {
								uni.$emit("getlist") //这里可以传个空,也可以传值过去
								uni.navigateBack()
								this.submitDisabled = false
							}, 1500)
						}
					}).catch(err => {
						this.submitDisabled = false
					})
				}).catch(err => {
					console.log('err', err);
				})
			},

		}
	}
</script>

<style>
	.container {
		padding: 15px;
		background-color: #fff;
		height: 100%;
		box-sizing: border-box;
	}

	.fileItem {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.fileLeft,
	.fileRight {
		display: flex;
		align-items: center;
	}

	.fileLeft {
		width: 80%;
	}

	.fileRight {
		width: 60px;
	}

	.fileName {
		width: 173px;
		word-wrap: break-word;
		white-space: pre-wrap;
	}
	/* .is-disable{
		background-color: #fff!important;
		color: #e5e5e5!important;
	} */
	.uni-forms-item__content .is-disabled {
		background-color:#fff!important;
		color: #333!important;
	}
	.example .uni-forms-item__label {
	  font-size: 16px;
	}
	
	.example .uni-forms-item__error {
	  font-size: 14px;
	
	}
	.uploadGroup {
		display: flex;
		/* padding: 30rpx; */
		flex-wrap: wrap;
	}
	
	.uploadGroup .box {
		width: 200rpx;
		height: 200rpx;
		background-color: #eee;
		margin-right: 15rpx;
		margin-bottom: 15rpx;
		position: relative;
	}
	
	.box image {
		width: 100%;
		height: 100%;
	}
	
	.pic {
		background-color: #fff;
	}
	
	.add {
		font-size: 80px;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #888;
	}
	
	.add image {
		width: 40%;
		height: 40%;
	}
	
	.close {
		position: absolute;
		right: 0;
		top: 0;
		width: 50rpx;
		height: 50rpx;
		background-color: rgba(0, 0, 0, 0.7);
		color: #fff;
		border-radius: 0 0 0 80rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		padding-left: 12rpx;
		box-sizing: border-box;
		padding-bottom: 15rpx;
	}
</style>